<mat-tree
  [dataSource]="dataSource"
  [treeControl]="treeControl"
  class="ngm-tree_selection"
  id="pac-entity-dimension"
>
  <mat-tree-node
    *matTreeNodeDef="let node"
    matTreeNodeToggle
    matTreeNodePaddingIndent="20"
    matTreeNodePadding
    class="ngm-list-item"
    [ngClass]="isSelected(node) ? 'selected' : ''"
    (click)="onSelect(node)"
    (mouseenter)="(node.readonly && !node.isUsage) || actionStrip.show()"
    (mouseleave)="(node.readonly && !node.isUsage) || actionStrip.hide()"
    cdkDrag
    [cdkDragData]="node"
  >
    <button mat-icon-button displayDensity="cosy" disabled></button>

    <ngm-entity-property [property]="node" [displayBehaviour]="displayBehaviour()" />

    <ngm-action-strip #actionStrip [hidden]="true">
      <button
        mat-icon-button displayDensity="cosy"
        *ngIf="!readonly() &&
          (node.role === AGGREGATION_ROLE.dimension || node.role === AGGREGATION_ROLE.hierarchy)
        "
        (click)="addNewItem($event, node)"
      >
        <mat-icon fontSet="material-icons-round">add_circle_outline</mat-icon>
      </button>

      <button mat-icon-button displayDensity="cosy" color="warn"
        (click)="onDelete($event, node)">
        <mat-icon>delete</mat-icon>
      </button>
    </ngm-action-strip>
  </mat-tree-node>

  <mat-tree-node
    *matTreeNodeDef="let node; when: hasChild"
    matTreeNodePaddingIndent="20"
    matTreeNodePadding
    class="ngm-list-item"
    [ngClass]="isSelected(node) ? 'selected' : ''"
    (click)="onSelect(node)"
    (mouseenter)="actionStrip.show()"
    (mouseleave)="actionStrip.hide()"
    cdkDrag
    [cdkDragData]="node"
  >
    <button mat-icon-button matTreeNodeToggle displayDensity="cosy">
      <mat-icon class="mat-icon-rtl-mirror" fontSet="material-icons-round">
        {{ treeControl.isExpanded(node) ? 'arrow_drop_down' : 'arrow_right' }}
      </mat-icon>
    </button>
    
    <ngm-entity-property [property]="node" [displayBehaviour]="displayBehaviour()"></ngm-entity-property>

    <ngm-action-strip #actionStrip [hidden]="true">
      @if (!readonly()) {
        <button mat-icon-button displayDensity="cosy" (click)="addNewItem($event, node)">
          <mat-icon fontSet="material-icons-round">add_circle_outline</mat-icon>
        </button>
      }

      <button mat-icon-button displayDensity="cosy" color="warn"
        (click)="onDelete($event, node)">
        <mat-icon>delete</mat-icon>
      </button>
    </ngm-action-strip>
  </mat-tree-node>
</mat-tree>
